Skip to main content

🍱 Layouts

Layouts are essential for organizing and structuring content within your application. They act as containers that hold other components, allowing you to create complex and responsive designs with ease.

Available Components:

  • Section
  • 2 Columns
  • 3 Columns
  • 2 Rows
  • 3 Rows
tip

Each component is fully customizable, allowing you to drag and drop, resize, and tailor them to fit your app's specific needs. Additionally, every component supports adding actions, setting styles for specific screen sizes, and extensive customization to enhance functionality and design.

info

The settings available in the left and right toolbar may vary depending on the selected component.

All Layouts​

  1. Select and Add a Layout:
    • Choose your desired layout from the Layouts category.
    • Drag and drop the layout onto the Canvas, or click on it to automatically place it on the screen.
  2. Position and Resize:
    • Place the layout in the desired location on the Canvas.
    • Resize by dragging the edges or by setting the size using percentage values.
  3. Customize the Layout:
    • Left Toolbar:
      • Select Layout Section: If the layout consists of multiple sections (e.g., columns or rows), select the specific section you wish to interact with from the components tree.
    • Right Toolbar:
      • Customization Features: Access comprehensive customization options, such as color, border style, and more.
      • Change Layout Sections:
        • Add Columns or Rows: Click on "Plus" to add more columns or rows to the layout.
        • Adjust Gaps: Use the "Gaps" section to add space between columns or rows.
        • Set Paddings: Use the "Paddings" section to add extra space within columns or rows.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].

Happy Building with AppStruct!